<template>
    <div class="container">
        <!-- 选项 -->
        <div class="position-relative">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" :href="'/profile/'+userId">个人信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" :href="'/mypost/'+userId">我的帖子</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" :href="'/myreply/'+userId">我的回复</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"  :href="'/mycource/'+userId">我的课程</a>
                </li>
            </ul>
        </div>
        <!-- 个人信息 -->
        <div class="media mt-5">
            <a :href="'/profile/' + (ifshow ? content.user.id : '')">
              <img :src="(ifshow ? content.user.photo : '')" class="align-self-start mr-4 rounded-circle" alt="用户头像" style="width:50px;">
            </a>

            <div class="media-body">
                <h5 class="mt-0 text-warning">
                    <span>{{ifshow ? content.user.name : ''}}</span>
                    <button v-on:click="follow(content,3,content.user.id)" type="button" class="btn btn-sm float-right mr-5 follow-btn"
                            :class="(ifshow ? content.hasFollowed : false)?'btn-secondary':'btn-info'">
                      {{(ifshow ? content.hasFollowed : false)?'已关注':'关注TA'}}
                    </button>
                </h5>
                <div class="text-muted mt-3">
                    <span>注册于 <i class="text-muted">{{(ifshow ? content.user.registerTime : '')| datatime}}</i></span>
                </div>
                <div class="text-muted mt-3 mb-5">
                    <span>关注了 <a class="text-primary" :href="'/followee/'+userId">{{ ifshow ?  content.followeeCount : 0}}</a> 人</span>
                    <span class="ml-4">关注者 <a class="text-primary" :href="'/follower/'+userId">{{ ifshow ? content.followerCount : 0}}</a> 人</span>
                    <span class="ml-4">获得了 <i class="text-danger">{{ifshow ? content.likeCount : 0}}</i> 个赞</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'profile',
    data(){
        return{
            content:null,
            ifshow:false,
            userId:""
        }
    },
    watch:{
        content(){
            this.setIfshow();
        }
    },
    created(){
        this.userId = this.$route.params.userId;
        this.setIfshow();
    },
    mounted(){
      this.getlist();
    },
    methods:{
        //获取详情数据
        getlist(){
            let _this = this;
            this.$ajax.get(process.env.VUE_APP_SERVER + '/business/web/member/profile/'+_this.userId).then((response)=>{
                console.log("查询帖子详情结果：", response);
                this.content = response.data.content;
            })
        },
        //判断对象是有值
        setIfshow(){
            if(this.content != null){
                this.ifshow = true;
            }else{
                this.ifshow = false;
            }
        },
      follow(item,entityType,entityId){
        let _this = this;
        this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/follow', {
          entityType:entityType,
          entityId:entityId,
        }).then((response)=>{
          if (response.data.success) {
            console.log("关注完成：", response);
            let followStatus = response.data.content;
            item.hasFollowed = followStatus;
          }else{
            Toast.error("关注失败！");
          }
        })
      },
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
</style>